<template>
	<view class="">
		<view class='noticeTop '>
			<view class='noticeTitle'>{{title}}</view>
			<view class='time'>{{date}}</view>
			<view class='num'>阅读{{read}}<text class='ml_20'>评论{{comment}}</text></view>
			<view class='contTitle'>{{subTitel}}</view>
			<view class='noticeTxt'>{{content}}中心不够明确，立意不够清晰。</view>
		</view>

		<view class='reply'>
			<view class='replyTitle'>最新回复</view>
			<view class="evaList" v-for="(reply, index) in replys">
				<view class="evaList_left">
					<image :src="reply.head"></image>
				</view>
				<view class="evaList_right">
					<view class='evaList_right_top'>{{reply.name}}</view>
					<view class='evaList_right_middle'>
						{{reply.txt}}
					</view>
					<view class='evaList_right_link'>
						<navigator>
							<view class="evaList_right_link_name">
								{{reply.otherName}}
							</view>
						</navigator>
						<view>等人</view>
						<navigator>
							<view class="evaList_right_link_num">
								共{{reply.num}}条回复>
							</view>
						</navigator>
					</view>
					<view class="evaList_right_bottom">
						<view class="evaList_right_bottom_left">
							{{reply.date}}
						</view>
						<view class="evaList_right_bottom_right">
							<image src="../../static/share10.png"></image>
							<image src="../../static/Reply12x.png"></image>
							<image src="../../static/zan02.png"></image>
							<view>{{read.zan}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '有关xxxx的通知',
				date: '2018年1月12日 14:00',
				read: 7512,
				comment: 8,
				subTitel: '主题严肃，思想高尚，进取心较强',
				content: '中心不够明确，立意不够清晰。中心不够明确，立意不够清晰。中心不够明确，立意不够清晰。',
				replys: [
					{
						head: '../../static/Candy2x.png',
						name: '高慧雯',
						txt: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
						otherName: '纵我七情六欲半晌愁',
						num: 233,
						date: '12-25 18:17',
						zen: 3124
					},
					{
						head: '../../static/Candy2x.png',
						name: '高慧雯',
						txt: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
						otherName: '纵我七情六欲半晌愁',
						num: 233,
						date: '12-25 18:17',
						zen: 3124
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.noticeTop {
		border-top: 1rpx solid #eee;
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.noticeTitle {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 2;
	}

	.time {
		font-size: 24rpx;
		color: #919191;
		line-height: 1.6;
	}

	.num {
		font-size: 24rpx;
		color: #3E8BF4;
		line-height: 1.6;
	}

	.contTitle {
		font-size: 28rpx;
		text-indent: 2em;
		margin-top: 15rpx;
	}

	.noticeTxt {
		font-size: 28rpx;
		line-height: 1.6;
	}

	/* 回复 */
	.reply {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.replyTitle {
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.evaList {
		display: flex;
		padding-top: 20rpx;
	}

	.evaList_left {
		margin-right: 20rpx;
	}

	.evaList_left image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
	}

	.evaList_right {
		width: 100%;
		font-size: 35rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.evaList_right_top {
		color: #575757;
	}

	.evaList_right_middle {
		margin: 10rpx 0;
	}

	.evaList_right_link {
		margin: 10rpx 0;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		font-size: 30rpx;
	}

	.evaList_right_link_name {
		max-width: 260rpx;
		color: #5f7293;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.evaList_right_link_num {
		color: #5f7293;
		margin-left: 20rpx;
	}

	.evaList_right_bottom {
		margin: 20rpx 0;
		color: #a7a7a7;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		/* align-items: center; */
	}

	.evaList_right_bottom_right {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.evaList_right_bottom_right image {
		width: 30rpx;
		height: 28rpx;
		margin: 0rpx 20rpx;
	}

	.evaList_right_bottom_right view {
		display: inline-block;
		font-size: 32rpx;
	}
</style>
